<!-- 安全生产检测机构信息详情展示 -->
<template>
    <div>
        <!-- 基本信息 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>基本信息</span>
                    <span style="margin-left: 10px;">
                        <el-button v-if="editor" type="primary" size="mini" @click="update">编 辑</el-button>
                        <el-button v-if="!editor" type="warning" size="mini" @click="save">保 存</el-button>
                        <el-button v-if="!editor" plain type="primary" size="mini" @click="cancel">取 消</el-button>
                    </span>
                </div>
            </div>
            <div>
                <el-row>
                    <el-col :span="24">
                        <div class="first">
                            <span class="name">机构名称：</span>
                            <span v-if="editor">{{ safety.name }}</span>
                            <span><el-input v-if="!editor" v-model="safety.name" clearable /></span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="first">
                            <span class="name">统一社会信用代码/注册号：</span>
                            <span v-if="editor">{{ safety.code }}</span>
                            <span><el-input v-if="!editor" v-model="safety.code" clearable /></span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">通信地址：</span>
                            <span v-if="editor">{{ safety.address }}</span>
                            <span><el-input v-if="!editor" v-model="safety.address" clearable /></span>
                        </div>
                    </el-col>
                    <el-col :span="15">
                        <div class="first">
                            <span class="name">邮政编码：</span>
                            <span v-if="editor">{{ safety.zipCode }}</span>
                            <span><el-input v-if="!editor" v-model="safety.zipCode" clearable /></span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">实验室地址：</span>
                            <span v-if="editor">{{ safety.labAddress }}</span>
                            <span><el-input v-if="!editor" v-model="safety.labAddress" clearable /></span>
                        </div>
                    </el-col>
                    <el-col :span="15">
                        <div class="first">
                            <span class="name">邮政编码：</span>
                            <span v-if="editor">{{ safety.labZipCode }}</span>
                            <span><el-input v-if="!editor" v-model="safety.labZipCode" clearable /></span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">机构信息公开网址：</span>
                            <span v-if="editor">{{ safety.web }}</span>
                            <span><el-input v-if="!editor" v-model="safety.web" clearable /></span>
                        </div>
                    </el-col>
                    <el-col :span="15">
                        <div class="first">
                            <span class="name">法定代表人：</span>
                            <span v-if="editor">{{ safety.legalRep }}</span>
                            <span><el-input v-if="!editor" v-model="safety.legalRep" clearable /></span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">机构联系人：</span>
                            <span v-if="editor">{{ safety.contacts }}</span>
                            <span><el-input v-if="!editor" v-model="safety.contacts" clearable /></span>
                        </div>
                    </el-col>
                    <el-col :span="15">
                        <div class="first">
                            <span class="name">联系电话：</span>
                            <span v-if="editor">{{ safety.mobile }}</span>
                            <span><el-input v-if="!editor" v-model="safety.mobile" clearable /></span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">主持检测检验工作负责：</span>
                            <span v-if="editor">{{ safety.restDirector }}</span>
                            <span><el-input v-if="!editor" v-model="safety.restDirector" clearable /></span>
                        </div>
                    </el-col>
                    <el-col :span="15">
                        <div class="first">
                            <span class="name">技术负责人：</span>
                            <span v-if="editor">{{ safety.technicalDirector }}</span>
                            <span><el-input v-if="!editor" v-model="safety.technicalDirector" clearable /></span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">资质证书编号：</span>
                            <span v-if="editor">{{ safety.qualifiCertifiId }}</span>
                            <span><el-input v-if="!editor" v-model="safety.qualifiCertifiId" clearable /></span>
                        </div>
                    </el-col>
                    <el-col :span="15">
                        <div class="first">
                            <span class="name">发证日期：</span>
                            <span v-if="editor">{{ safety.issueTime }}</span>
                            <el-date-picker v-if="!editor" v-model="safety.issueTime" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="选择日期" clearable />
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <div class="first">
                            <span class="name">资质证书批准部门：</span>
                            <span v-if="editor">{{ safety.approvalDept }}</span>
                            <span><el-input v-if="!editor" v-model="safety.approvalDept" clearable /></span>
                        </div>
                    </el-col>
                    <el-col :span="15">
                        <div class="first">
                            <span class="name">有效日期：</span>
                            <span v-if="editor">{{ safety.effectiveTime }}</span>
                            <el-date-picker v-if="!editor" v-model="safety.effectiveTime" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="选择日期" clearable />
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!-- 批准的业务范围 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>批准的业务范围</span>
                    <span><el-button style="margin-left: 10px;" type="success" plain size="mini" @click="showAddBusinessScope">添加</el-button></span>
                </div>
            </div>
            <div>
                <el-table border stripe :data="BusinessScopeTeam" style="width: 90%; margin-left: 40px; padding-bottom: 15px;">
                    <el-table-column prop="detectedObj" align="center" label="被检对象" />
                    <el-table-column label="项目/参数" align="center">
                        <el-table-column prop="projParamName" label="名称" align="center" />
                    </el-table-column>
                    <el-table-column prop="standardName" align="center" label="依据标准编号及名称" />
                    <el-table-column prop="limitScope" align="center" label="限制范围" />
                    <el-table-column prop="remark" align="center" label="说明" />
                    <el-table-column label="操作" align="center" width="200">
                        <template slot-scope="scope">
                            <el-button type="primary" plain size="mini" @click="editBusinessScope(scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" @click="deleteBusinessScope(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 批准的授权签字人及授权签字领域 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>批准的授权签字人及授权签字领域</span>
                    <span><el-button style="margin-left: 10px;" type="success" plain size="mini" @click="showAddAuthority">添加</el-button></span>
                </div>
            </div>
            <div>
                <el-table border stripe :data="ApprovalAuthority" style="width: 60%; margin-left: 40px; padding-bottom: 15px;">
                    <el-table-column type="index" />
                    <el-table-column prop="signatoryName" align="center" label="姓名" />
                    <el-table-column prop="signatoryFiled" align="center" label="授权签字领域" />
                    <el-table-column label="操作" align="center" width="200">
                        <template slot-scope="scope">
                            <el-button type="primary" plain size="mini" @click="editApprovalAuthority(scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" @click="deleteAuthority(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 机构违法受处罚信息 -->
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>机构违法受处罚信息</span>
                </div>
            </div>
            <div>
                <el-table border stripe :data="PunishmentInfo" style="width: 90%; margin-left: 40px; padding-bottom: 15px;">
                    <el-table-column prop="illegaAction" align="center" label="违法事实" />
                    <el-table-column prop="punishment" align="center" label="处罚决定" />
                    <el-table-column prop="punishTime" align="center" label="处罚时间" />
                    <el-table-column prop="enforceAgen" align="center" label="执法机关" />
                </el-table>
            </div>
        </div>
        <!-- 添加批准的业务范围弹框 -->
        <el-dialog title="添加批准的业务范围" width="35%" :visible.sync="dialogVisible1" center>
            <el-form ref="addForm" :model="businessScope" :rules="rules">
                <el-row class="tag">
                    <el-col :span="24">
                        <el-form-item label="被检测对象:" prop="detectedObj">
                            <el-input v-model="businessScope.detectedObj" prefix-icon="el-icon-edit" placeholder="请输入被检测对象" clearable style="width: 200px;" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="tag">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="(项目/参数)名称:" prop="projParamName">
                                <el-input v-model="businessScope.projParamName" prefix-icon="el-icon-edit" placeholder="请输入名称" clearable style="width: 250px;" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-row>
                <el-row class="tag">
                    <el-col :span="24">
                        <el-form-item label="依据标准编号及名称:" prop="standardName">
                            <el-input v-model="businessScope.standardName" prefix-icon="el-icon-edit" placeholder="请输入依据标准编号及名称" clearable style="width: 300px;" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="tag">
                    <el-col :span="24">
                        <el-form-item label="限制范围:" prop="limitScope">
                            <el-input v-model="businessScope.limitScope" prefix-icon="el-icon-edit" placeholder="请输入限制范围" clearable style="width: 370px;" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="tag">
                    <el-col :span="24">
                        <el-form-item label="说明:">
                            <el-input v-model="businessScope.remark" prefix-icon="el-icon-edit" placeholder="请输入说明" clearable style="width: 370px;" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="doAddBusinessScope">确 认 添 加</el-button>
            </span>
        </el-dialog>
        <!-- 添加批准授权签字弹框 -->
        <el-dialog title="添加批准的授权签字人及授权签字领域" width="25%" :visible.sync="dialogVisible3" center>
            <el-form :model="AddApprovalAuthority">
                <el-row class="tag">
                    <el-col :span="24">
                        <el-form-item label="姓名:">
                            <el-input v-model="AddApprovalAuthority.signatoryName" prefix-icon="el-icon-edit" placeholder="请输入姓名" clearable style="width: 200px;" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="tag">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="授权签字领域:">
                                <el-input v-model="AddApprovalAuthority.signatoryFiled" prefix-icon="el-icon-edit" placeholder="请输入授权签字领域" clearable style="width: 250px;" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible3 = false">取 消</el-button>
                <el-button type="primary" @click="doAddAuthority">确 认 添 加</el-button>
            </span>
        </el-dialog>
        <!-- 编辑批准的业务范围弹框 -->
        <el-dialog title="编辑批准的业务范围" :visible.sync="dialogVisible" width="30%" center>
            <div class="tag">
                <el-tag>被检对象</el-tag>
                <el-input v-model="editScope.detectedObj" clearable class="updateProfGroup" />
            </div>
            <div class="tag">
                <el-tag>(项目/参数)名称</el-tag>
                <el-input v-model.trim="editScope.projParamName" clearable class="updateProfGroup" @input="change($event)" />
            </div>
            <div class="tag">
                <el-tag>依据标准编号及名称</el-tag>
                <el-input v-model.trim="editScope.standardName" clearable class="updateProfGroup" @input="change($event)" />
            </div>
            <div class="tag">
                <el-tag>限制范围</el-tag>
                <el-input v-model.trim="editScope.limitScope" clearable class="updateProfGroup" @input="change($event)" />
            </div>
            <div class="tag">
                <el-tag>说明</el-tag>
                <el-input v-model.trim="editScope.remark" clearable style="margin-left: 8px; width: 300px;" @input="change($event)" />
            </div>
            <span slot="footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="updateBusinessScope">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑批准授权签字弹框 -->
        <el-dialog title="编辑批准的授权签字人及授权签字领域" :visible.sync="dialogVisible2" width="30%" center>
            <div class="tag">
                <el-tag>姓名</el-tag>
                <el-input v-model="editAuthority.signatoryName" clearable class="updateProfGroup" />
            </div>
            <div class="tag">
                <el-tag>授权签字领域</el-tag>
                <el-input v-model.trim="editAuthority.signatoryFiled" clearable class="updateProfGroup" @input="change($event)" />
            </div>
            <span slot="footer">
                <el-button size="small" @click="dialogVisible2 = false">取 消</el-button>
                <el-button size="small" type="primary" @click="updateAuthority">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {Message} from 'element-ui'

export default {
    name: 'SafetyProductionInspectionOrganizationDetails',
    data() {
        return {
            editAuthority: {},
            ApprovalAuthority: [],
            PunishmentInfo: [],
            safety: {},
            editor: true,
            dialogVisible2: false,
            dialogVisible: false,
            dialogVisible1: false,
            dialogVisible3: false,
            editScope: {},
            businessScope: {},
            AddApprovalAuthority: {},
            BusinessScopeTeam: [],
            rules: { // 校验,与prop名对应
                detectedObj: [
                    { required: true, trigger: 'blur', message: '请输入被检对象' }
                ],
                projParamName: [
                    { required: true, trigger: 'blur', message: '请输入(项目/参数)名称' }
                ],
                standardName: [
                    { required: true, trigger: 'blur', message: '请输入依据标准编号及名称' }
                ],
                limitScope: [
                    { required: true, trigger: 'blur', message: '请输入限制范围' }
                ]
            }
        }
    },
    created() {
        this.initSafety()
        this.agentId =  parseInt(this.$route.query.id) // 初始获取’批准的业务范围‘id转换
        this.punAgentId =  parseInt(this.$route.query.id) // 初始获取’违法处罚信息‘id转换
        this.businessScope.agentId = parseInt(this.$route.query.id) // 添加’批准的业务范围‘id转换
        this.AddApprovalAuthority.agentId = parseInt(this.$route.query.id) // 添加’批准授权‘id转换
        this.initApprovalAuthority()
        this.initBusinessScopeTeam()
        this.initPunishmentInfo()
    },
    methods: {
        initSafety() { // 分页获取安全生产检测机构信息
            var obj = {page: 1, size: 2, name: this.$route.query.name, legalRep: this.$route.query.legalRep}
            this.getRequest('/system/prodTestAgent/getProdTestInfo', obj).then(resp => {
                if (resp) {
                    this.safety = resp.data.data[0]
                }
            })
        },
        initBusinessScopeTeam() { // 初始获取'批准的业务范围'信息
            this.getRequest('/system/prodTestAgent/getBusinessScope/' + this.agentId).then(resp => {
                if (resp) {
                    this.BusinessScopeTeam = resp.data
                }
            })
        },
        editBusinessScope(row) { // 编辑'批准的业务范围'
            this.editScope = row
            this.dialogVisible = true
        },
        updateBusinessScope() { // 确认保存编辑的'批准的业务范围'
            this.putRequest('/system/prodTestAgent/updateBusinessScope', this.editScope).then(resp => {
                if (resp) {
                    this.dialogVisible = false
                    Message.success('更新成功')
                    this.initBusinessScopeTeam()
                }
            })
        },
        showAddBusinessScope() { // 添加'批准的业务范围'按钮绑定弹窗事件
            this.dialogVisible1 = true
        },
        doAddBusinessScope() { // 确认添加'批准的业务范围'按钮绑定事件
            this.$refs['addForm'].validate(valid => {
                if (valid) {
                    this.postRequest('/system/prodTestAgent/addBusinessScope', this.businessScope).then(resp => {
                        if (resp) {
                            this.dialogVisible1 = false
                            Message.success('添加成功')
                            this.initBusinessScopeTeam()
                        }
                    })
                }
            })
        },
        change() {
            this.$forceUpdate()
        },
        initPunishmentInfo() { // 初始获取'机构违法受处罚'信息
            this.getRequest('/system/prodTestAgent/getProdOrgPunishmentInfo/' + this.punAgentId).then(resp => {
                if (resp) {
                    this.PunishmentInfo = resp.data.obj
                }
            })
        },
        initApprovalAuthority() { // 初始获取'授权人签字'信息
            this.getRequest('/system/prodTestAgent/getSignFiled/' + this.agentId).then(resp => {
                if (resp) {
                    this.ApprovalAuthority = resp.data
                }
            })
        },
        showAddAuthority() { // 添加'批准授权'按钮绑定弹窗事件
            this.dialogVisible3 = true
        },
        doAddAuthority() { // 确认添加'批准授权'按钮绑定事件
            this.postRequest('/system/prodTestAgent/addSignFiled', this.AddApprovalAuthority).then(resp => {
                if (resp) {
                    this.dialogVisible3 = false
                    Message.success('添加成功')
                    this.initApprovalAuthority()
                }
            })
        },
        editApprovalAuthority(row) { // 编辑'批准授权签字'
            this.editAuthority = row
            this.dialogVisible2 = true
        },
        updateAuthority() { // 确认保存编辑的'批准授权签字'
            this.putRequest('/system/prodTestAgent/updateSignFiled', this.editAuthority).then(resp => {
                if (resp) {
                    this.dialogVisible2 = false
                    Message.success('更新成功')
                    this.initApprovalAuthority()
                }
            })
        },
        deleteBusinessScope(data) { // 删除一条'批准业务范围'信息
            this.$confirm('此操作将永久删除  ' + data.detectedObj + ',是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest('/system/prodTestAgent/deleteBusinessScope', data.id).then(resp => {
                    if (resp) {
                        Message.success('删除成功')
                        this.initBusinessScopeTeam()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        deleteAuthority(data) { // 删除一条'授权签字'信息
            this.$confirm('此操作将永久删除  ' + data.signatoryName + ',是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest('/system/prodTestAgent/deleteSignFiled', data.id).then(resp => {
                    if (resp) {
                        Message.success('删除成功')
                        this.initApprovalAuthority()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        update() {
            this.editor = false
        },
        cancel() {
            this.editor = true
        },
        save() { // 保存修改的页面信息
            this.editor = !this.editor
            this.putRequest('/system/prodTestAgent/updateProdTestAgent', this.safety).then(resp => {
                if (resp) {
                    Message.success('更新成功')
                    this.initApprovalAuthority()
                    this.initBusinessScopeTeam()
                    this.initPunishmentInfo()
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.basic {
    margin: 20px;
    background: #fff;
}
.header {
    padding-top: 15px;
    padding-bottom: 15px;
}
.name {
    color: #888;
    overflow: hidden;
    white-space: nowrap;
    font-size: 16px;
}
.title {
    margin-left: 20px;
    color: #337ab7;
}
.first {
    display: flex;
    margin-left: 40px;
    margin-bottom: 25px;
    align-items: center;
}
.updateProfGroup {
    width: 200px;
    margin-left: 8px;
}
.tag {
    margin-top: 20px;
    margin-left: 30px;
}
.el-input {
    width: 250px;
}
</style>
